<template>
	<div class="movie_body" ref="movie_body">
		<Loading v-if="isLoading"/>
		<Scroller v-else :handleScroll='handleScroll' :handleTouchEnd='handleTouchEnd'>
			<ul>
				<li v-show="pullDownMessage">{{pullDownMessage}}</li>
				<li  v-for="(item) in moveList" :key="item.id">
																				<!-- 图片选择尺寸用了全局过滤器 -->
					<div class="pic_show" @click="handleToDetail(item.id)"><img :src="item.img | setWH('128.180')"></div>
					<div class="info_list">
						<h2 @click="handleToDetail(item.id)">{{item.nm}} <img v-if="item.version=='v3d imax'" src="@/assets/maxs.png" alt=""></h2>
						<p>观众评 <span class="grade">{{item.sc}}</span></p>
						<p>主演: {{item.star}}</p>
						<p>{{item.showInfo}}</p>
					</div>
					<div class="btn_mall">
						购票
					</div>
				</li>
			</ul>
		</Scroller>
	</div>
</template>

<script>
	import {
		setWH
	} from '../../filter'//导入过滤器下的自定义方法

	export default {
		data() {
			return {
				moveList: [],//电影列表
				pullDownMessage: "",//下拉刷新提示
				isLoading:true,//加载动画
				preCityId:-1//设置一个cityId的值
			}
		},
		//组件存在keep-alive系统的时候可以用 activated  相当于mounted
		activated() {//正在上映页面加载完毕时
			//实现只在切换城市的时候发送ajax请求
			let cityId = this.$store.state.city.id//在vuex仓库中获取当前城市的id
			//判断上一个城市和当前城市的id是否相同
			if(this.preCityId===cityId){return;}
			
			this.axios.get('/movieOnInfoList?city='+cityId).then(res => {
				this.moveList = res.data.movieList
				this.isLoading = false;
				this.preCityId = cityId //获取当前城市id后更新到data的preCityId中

				// this.$nextTick(() => {
				// 	let scroll = new BetterScroll(this.$refs.movie_body, {
				// 		click: true,
				// 		probeType: 1
				// 	})
				// 	scroll.on('scroll', (pos) => {
				// 		// console.log(pos.y)
				// 		if (pos.y > 30) {
				// 			this.pullDownMessage = "正在更新中"
				// 		}
				// 	})

				// 	scroll.on('touchEnd', (pos) => {
				// 		if (pos.y > 30) {
				// 			this.axios.get('/movieOnInfoList?city=20').then(res => {
				// 				this.pullDownMessage = "更新成功"
				// 				setTimeout(() => {
				// 					this.moveList = res.data.movieList
				// 					this.pullDownMessage = ""
				// 				}, 1000)
				// 			})
				// 		}
				// 	})
				// })
			})
		},
		methods: {
			handleToDetail(movieId) {
				//路由传参 携带参数跳转到详情页
				this.$router.push('/movies/detail/1/'+movieId);//路由传参
			},
			//将函数传入到Scroller子组件中 完成父子通信
			handleScroll(pos) {
				if (pos.y > 30) {
					this.pullDownMessage = "正在更新中"
				}
			},

			handleTouchEnd(pos) {
				if (pos.y > 30) {
					this.axios.get('/movieOnInfoList?city=20').then(res => {
						this.pullDownMessage = "更新成功"
						setTimeout(() => {
							this.moveList = res.data.movieList
							this.pullDownMessage = ""
						}, 1000)
					})
				}
			},

		},

	}
</script>

<style scoped>
	#content .movie_body {
		flex: 1;
		overflow-y: hidden;
	}

	.movie_body ul {
		margin: 0 12px;
		overflow: hidden;
	}

	.movie_body ul li {
		margin-top: 12px;
		display: flex;
		align-items: center;
		border-bottom: 1px #e6e6e6 solid;
		padding-bottom: 10px;
	}

	.movie_body .pic_show {
		width: 64px;
		height: 90px;
	}

	.movie_body .pic_show img {
		width: 100%;
	}

	.movie_body .info_list {
		margin-left: 10px;
		flex: 1;
		position: relative;
	}

	.movie_body .info_list h2 {
		font-size: 17px;
		line-height: 24px;
		width: 150px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.movie_body .info_list p {
		font-size: 13px;
		color: #666;
		line-height: 22px;
		width: 200px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.movie_body .info_list .grade {
		font-weight: 700;
		color: #faaf00;
		font-size: 15px;
	}

	.movie_body .info_list img {
		width: 50px;
		position: absolute;
		right: 10px;
		top: 5px;
	}

	.movie_body .btn_mall,
	.movie_body .btn_pre {
		width: 47px;
		height: 27px;
		line-height: 28px;
		text-align: center;
		background-color: #f03d37;
		color: #fff;
		border-radius: 4px;
		font-size: 12px;
		cursor: pointer;
	}

	.movie_body .btn_pre {
		background-color: #3c9fe6;
	}
</style>
